import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image ,Checkbox} from '@tarojs/components'
import './xuanzexiezuobingli.css'
import { AtSearchBar, AtIcon, AtGrid ,AtAccordion,AtTag, AtButton,AtCheckbox} from 'taro-ui'
import reactMixin from 'react-mixin';
// import myJs from './xuanzexiezuobingliJs.js'
import app from '../../../../main.js'
import { notEqual } from 'assert';

export default class Xuanzexiezuobingli extends Component {

    config = {
        navigationBarTitleText: '选择协作病历'
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            history_project_cases: [],
            id:[],
            boolean:[],
            value:'',
        }
    }
  
    componentWillMount () {
        this.historyProjectCases();
    }

    historyProjectCases() {
        let me = this;
        let brr = [];
        let data = {
            offset:0,
            length:1000,
            keyword:me.state.value
        }
        app.get('web/case/history_project_cases', data , function(res) {
            let data = res.data;
            console.log(data)
            me.setState({
                history_project_cases: data.result.list
            },()=>{
                for(let val of me.state.history_project_cases){
                brr.push(false)
            }
            me.setState({
                boolean:brr
            })
            })
        })
    }

    //搜索框
    handleChange(value){
        let me = this
        if(value.length == 0){
            me.setState({
                value: value
            },()=>{
                me.historyProjectCases();
            })  
        }else{
            me.setState({
                value: value
            })
        } 
    }

    //点击搜索框
    onActionClick(){
        this.historyProjectCases();
    }

    nagivateTo() {
        let id = this.state.id
        console.log(id)
        app.navigateTo('../teaminvite/teaminvite?id='+id+'&pages='+1);
    }

    //点击多选框
    changeCheckBox(index){
        let me =this;
        let arr = me.state.id;
        let brr = me.state.boolean;
        let crr = me.state.history_project_cases;
        if(me.state.boolean[index]==false){
        brr.splice(index,1,true);
        arr.push(crr[index].id)
        me.setState({
            id:arr,
            boolean:brr
        },()=>{
            // console.log(me.state.id)
            // console.log(me.state.boolean)
        })
        }else{
        brr.splice(index,1,false)
        arr.splice(arr.indexOf(crr[index].id),1)
        me.setState({
            id:arr,
            boolean:brr
        },()=>{
            // console.log(me.state.id)
            // console.log(me.state.boolean)
        })
        }
    }

  render() {
    return (
        <View className='xuanzexiezuobingli'>
            <AtSearchBar
                value={this.state.value}
                onChange={this.handleChange.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
            />
            {
                this.state.history_project_cases.map((item,index)=>{
                    return(
                        <View className='body' onClick={this.changeCheckBox.bind(this,index)}>
                            <View className='body-left'>
                                <Checkbox className='Checkbox-a' value='' checked={this.state.boolean[index]}></Checkbox>
                            </View>
                            <View className='body-right'>
                                <View className='right-top'>
                                    <View className='top-text-name'>{item.patient_name}</View>
                                    <View className='top-text'>{item.gender}</View>
                                    <View className='top-text'>{item.age}岁</View>
                                    {item.status == null ? none : <AtTag className='status' circle>{item.status}</AtTag>}
                                </View>
                                <View className='right-middle'>
                                    { !item.diagnosis ? none : <View className='middle-text'>{item.diagnosis}</View> }
                                </View>
                                <View className='right-bottom'>
                                    <View className='bottom-left'>
                                        <AtIcon value='bullet-list' size='20' color='#cccccc' className='icon'></AtIcon>
                                        <View className='text'>{item.code}</View>
                                    </View>
                                    <View className='bottom-middle'>
                                        <AtIcon value='calendar' size='20' color='#cccccc' className='icon'></AtIcon>
                                        <View className='text'>{item.created_at}</View>
                                    </View> 
                                    <View className='bottom-right'>
                                        {item.project_name == null ? none :  <View className='point'></View>}
                                        {item.project_name == null ? none :  <View className='text'>{item.project_name}</View>}                    
                                    </View> 
                                </View>
                            </View>
                        </View>   
                    )
                })
            }
            
            <View style='height:90rpx;'></View>
            <AtButton type='primary' className='btnn' onClick={this.nagivateTo.bind(this)}>确定</AtButton>

        </View>
    )
  }
}
// reactMixin.onClass(Xuanzexiezuobingli,myJs);
